<template>
  <div class="shop-delivery">
    <van-nav-bar
      class="shop-nav"
      title="店铺送货方式"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="delivery">
      <div class="flex-class">
        <div class="delivery-check">
          <van-checkbox v-model="selfForm.checked">到店自提</van-checkbox>
        </div>
        <div></div>
      </div>
      <div class="flex-class">
        <div class="delivery-check">
          <van-checkbox v-model="cityForm.checked">同城配送</van-checkbox>
        </div>
        <div class="delivery-form">
          <van-form ref="cityFormRef" @submit="oncityFormSubmit">
            <van-field
              v-model="cityForm.start_price"
              name="起配价"
              label="起配价"
              placeholder="起配价（元）"
              :rules="[{ required: true, message: '请填写起配价' }]"
            />
            <van-field
              v-model="cityForm.start_scope"
              name="起配范围"
              label="起配范围"
              placeholder="起配范围（公里）"
              :rules="[{ required: true, message: '请填写起配范围' }]"
            />
            <van-field
              v-model="cityForm.delivery_price"
              name="超出配送费"
              label="超出配送费"
              placeholder="超出配送费（元/公里）"
              :rules="[{ required: true, message: '请填写超出配送费' }]"
            />
            <van-field
              readonly
              clickable
              name="startTimePicker"
              :value="cityForm.start_time"
              label="开始时间"
              placeholder="点击选择开始时间"
              @click="cityFormPcik.showStartTimePicker = true"
            />
            <van-popup v-model="cityFormPcik.showStartTimePicker" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="onCityFormStartTime"
                @cancel="cityFormPcik.showStartTimePicker = false"
              />
            </van-popup>
            <van-field
              readonly
              clickable
              name="endTimePicker"
              :value="cityForm.end_time"
              label="结束选择"
              placeholder="点击选择结束时间"
              @click="cityFormPcik.showEndTimePicker = true"
            />
            <van-popup v-model="cityFormPcik.showEndTimePicker" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="onCityFormEndTime"
                @cancel="cityFormPcik.showEndTimePicker = false"
              />
            </van-popup>
          </van-form>
        </div>
      </div>
      <div class="flex-class">
        <div class="delivery-check">
          <van-checkbox v-model="scopeForm.checked">区域配送</van-checkbox>
        </div>
        <div class="delivery-form">
          <van-form ref="scopeFormRef" @submit="onScopeFormSubmit">
            <van-field
              v-model="scopeForm.start_price"
              name="起配价"
              label="起配价"
              placeholder="起配价（元）"
              :rules="[{ required: true, message: '请填写起配价' }]"
            />
            <van-field
              v-model="scopeForm.start_scope"
              name="起配范围"
              label="起配范围"
              placeholder="起配范围（公里）"
              :rules="[{ required: true, message: '请填写起配范围' }]"
            />
            <van-field
              v-model="scopeForm.delivery_price"
              name="超出配送费"
              label="超出配送费"
              placeholder="超出配送费（元/公里）"
              :rules="[{ required: true, message: '请填写超出配送费' }]"
            />
            <van-field
              v-model="scopeForm.delivery_scope"
              name="配送范围"
              label="配送范围"
              placeholder="配送范围（公里）"
              :rules="[{ required: true, message: '请填写配送范围' }]"
            />
            <van-field
              readonly
              clickable
              name="startTimePicker"
              :value="scopeForm.start_time"
              label="开始时间"
              placeholder="点击选择开始时间"
              @click="scopeFormPcik.showStartTimePicker = true"
            />
            <van-popup v-model="scopeFormPcik.showStartTimePicker" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="onScopeFormStartTime"
                @cancel="scopeFormPcik.showStartTimePicker = false"
              />
            </van-popup>
            <van-field
              readonly
              clickable
              name="startTimePicker"
              :value="scopeForm.end_time"
              label="结束选择"
              placeholder="点击选择结束时间"
              @click="scopeFormPcik.showEndTimePicker = true"
            />
            <van-popup v-model="scopeFormPcik.showEndTimePicker" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="onScopeFormEndTime"
                @cancel="scopeFormPcik.showEndTimePicker = false"
              />
            </van-popup>
          </van-form>
        </div>
      </div>
      <div class="btn">
        <van-button class="savaBtn" type="info" round block @click="savaDelivery">保存</van-button>
        <van-button
          class="submit-audit"
          type="info"
          block
          round
          @click="submitAudit"
          :disabled="isSubmitAudit"
          >{{ submitAuditText }}</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { updateShopDelivery, getShopDelivery, shopAudit, getShopInfo } from '@/api/shop'
export default {
  name: 'ShopDelivery',
  props: {
    shopId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      isSubmitAudit: false,
      submitAuditText: '提交审核',
      selfForm: {
        delivery_way: 'self',
        delivery_way_name: '到店自提',
        shop_id: this.shopId,
        checked: false
      },
      cityForm: {
        checked: false,
        delivery_way: 'city',
        delivery_way_name: '同城配送',
        shop_id: this.shopId,
        start_price: '',
        start_scope: '',
        delivery_price: '',
        start_time: '',
        end_time: ''
      },
      cityFormPcik: {
        showStartTimePicker: false,
        showEndTimePicker: false
      },
      scopeForm: {
        checked: false,
        delivery_way: 'scope',
        delivery_way_name: '区域配送',
        shop_id: this.shopId,
        start_price: '',
        start_scope: '',
        delivery_price: '',
        delivery_scope: '',
        start_time: '',
        end_time: ''
      },
      scopeFormPcik: {
        showStartTimePicker: false,
        showEndTimePicker: false
      }
    }
  },
  created() {
    this.getDelivery()
    this.getShopInfo()
  },
  mounted() {},
  methods: {
    // 同城运输方法
    oncityFormSubmit(values) {
      console.log('submit', values)
    },
    onCityFormStartTime(time) {
      this.cityForm.start_time = time
      this.cityFormPcik.showStartTimePicker = false
    },
    onCityFormEndTime(time) {
      this.cityForm.end_time = time
      this.cityFormPcik.showEndTimePicker = false
    },
    // 区域运送方法
    onScopeFormSubmit(values) {
      console.log('submit', values)
    },
    onScopeFormStartTime(time) {
      this.scopeForm.start_time = time
      this.scopeFormPcik.showStartTimePicker = false
    },
    onScopeFormEndTime(time) {
      this.scopeForm.end_time = time
      this.scopeFormPcik.showEndTimePicker = false
    },
    async savaDelivery() {
      const deliveryList = []
      if (this.selfForm.checked) {
        deliveryList.push(this.selfForm)
      }
      if (this.cityForm.checked) {
        deliveryList.push(this.cityForm)
      }
      if (this.scopeForm.checked) {
        deliveryList.push(this.scopeForm)
      }
      const { data: res } = await updateShopDelivery(this.shopId, {
        deliveryList
      })
      if (res.meta.status === 200) {
        this.$toast.success('新增成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async getDelivery() {
      const { data: res } = await getShopDelivery(this.shopId)
      if (res.meta.status === 200) {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            if (item.delivery_way === this.selfForm.delivery_way) {
              this.selfForm = item
              this.selfForm.checked = true
            } else if (item.delivery_way === this.cityForm.delivery_way) {
              this.cityForm = item
              this.cityForm.checked = true
            } else if (item.delivery_way === this.scopeForm.delivery_way) {
              this.scopeForm = item
              this.scopeForm.checked = true
            }
          })
        }
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async submitAudit() {
      const { data: res } = await shopAudit(this.shopId)
      if (res.meta.status === 200) {
        this.isSubmitAudit = true
        this.$toast.success('提交审核成功')
      } else {
        this.$toast.fail(res.meta.msg)
      }
    },
    async getShopInfo() {
      const { data: res } = await getShopInfo(this.shopId)
      if (res.meta.status === 200) {
        this.isSubmitAudit = res.data.audit_state === 'apply' || res.data.audit_state === 'pass'
        const obj = {
          ini: '提交审核',
          apply: '待审核',
          pass: '审核成功',
          refuse: '审核拒绝（再次提交）'
        }
        this.submitAuditText = obj[res.data.audit_state]
      } else {
        this.$toast.fail(res.meta.msg)
      }
    }
  }
}
</script>

<style scoped lang="less">
.shop-delivery {
  /deep/.shop-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #008bfa;
    .van-nav-bar__text,
    .van-nav-bar__title,
    .van-icon {
      color: #fff;
    }
  }

  .delivery {
    margin-top: 92px;
    margin-bottom: 90px;
    .flex-class {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 30px;
      margin: 20px 0;
      padding: 10px 10px;
      border-bottom: 1px solid #eee;
      .delivery-check {
        flex: 1;
      }
      .delivery-form {
        flex: 3;
        display: flex;
        align-items: center;
        .van-cell {
          font-size: 30px;
        }
      }
    }
    .savaBtn {
      margin-bottom: 20px;
    }
  }
  .submit-audit {
    margin-top: 40px;
  }
  .btn {
    padding: 0 40px;
  }
}
</style>
